<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入ElementUI样式
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme- chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
&lt;!&ndash; 引入ElementUI组件库 &ndash;&gt;
<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<link rel="stylesheet" href="../js/index.css">
<script src="../js/vue.js"></script>
<script src="../js/index.js"></script>
<body>
    <div id="app">
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                //定义vue对象的模型数据,用于vue展示
                tableData:[
                    {date:'2019.10.12',name:'zhangsan',address:'asd654'},
                    {date:'2019.10.12',name:'zhangsan',address:'asd654'},
                    {date:'2019.10.12',name:'zhangsan',address:'asd654'}
                ]
            },
            methods:{
                handleEdit(row) {
                    alert(row.name);
                },
                handleDelete(row){
                    alert(row.date)
                }
            }
        });
    </script>
</body>
</html>